<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            overflow: hidden;
        }

        body,
        div,
        h2,
        p {
            margin: 0;
            padding: 0;
        }

        body {
            color: #fff;
            background: #000;
            font: 12px/2 Arial;
        }

        p {
            padding: 0 10px;
            margin-top: 10px;
        }

        span {
            color: #ff0;
            padding-left: 5px;
        }

        #box {
            position: absolute;
            width: 300px;
            height: 150px;
            background: #333;
            border: 2px solid #ccc;
        }

        #box h2 {
            height: 25px;
            line-height: 25px;
            cursor: move;
            /*手型：移动*/
            background: #222;
            border-bottom: 2px solid #ccc;
            text-align: right;
            padding: 0 10px;
        }

        #box h2 a {
            color: #fff;
            font: 12px/25px Arial;
            text-decoration: none;
            outline: none;
        }
    </style>
</head>
<body>
    <div id="box">
        <h2><a href="#">点击回放拖动轨迹</a></h2>
        <p><strong>Drag:</strong><span>false</span></p>
        <p><strong>offsetLeft:</strong><span>0</span></p>
        <p><strong>offsetTop:</strong><span>0</span></p>
    </div>

    <script>
        window.onload = function () {
            /* 
                两个阶段：
                【1】拖拽阶段
                    1.在元素上按下 mousedown，同时给document添加 mousemove 事件
                        记录光标在元素上的位置
                    2.但在元素上鼠标抬起 mouseup，解除 document的 mousemove 事件
                    3.mousemove过程，将盒子的 左边和上边的位置 以对象的形式存在数组中
                【2】回放阶段
                    1.点击回放的时候，把存入数组中的 数据一次取出添加给 元素
            */
            var box = document.getElementById('box');
            var h2 = box.children[0];
            var dragSpan = box.children[1].children[1];
            var leftSpan = box.children[2].children[1];
            var topSpan = box.children[3].children[1];
            var links = h2.children[0];
            var arr = [];
            // 给h2绑定点击事件
            h2.onmousedown = function (e) {
                // console.log(1);
                var obj = {};
                obj.x = box.offsetLeft;
                obj.y = box.offsetTop;
                arr.push(obj);
                // 获取点击时候，光标在元素上的位置
                var ox = e.offsetX;
                var oy = e.offsetY;
                dragSpan.innerHTML = 'true';
                document.onmousemove = function (evt) {
                    box.style.left = evt.clientX - ox + 'px'
                    box.style.top = evt.clientY - oy + 'px';
                    leftSpan.innerHTML = evt.clientX - ox;
                    topSpan.innerHTML = evt.clientY - oy;
                    var obj = {};
                    obj.x = evt.clientX - ox;
                    obj.y = evt.clientY - oy;
                    arr.push(obj);
                }
            }
            document.onmouseup = function () {
                document.onmousemove = null;
                dragSpan.innerHTML = 'false'
            }
            links.onclick = function () {
                clearInterval(links.timer);
                var i = 0;
                links.timer = setInterval(function () {
                    box.style.left = arr[i].x + 'px';
                    box.style.top = arr[i].y + 'px';

                    leftSpan.innerHTML = arr[i].x;
                    topSpan.innerHTML = arr[i].y;
                    i++;
                    if (i === arr.length) {
                        clearInterval(links.timer);
                        arr = [];
                    }
                }, 10)
            }
        }
    </script>
</body>
</html>